<template>
  <div class="discoverContainer">
    <nav-bar :navBarData="navBarData" @clickBarItem="clickBarItem"></nav-bar>
    <router-view class="discover"></router-view>
  </div>
</template>

<script>
import NavBar from "@/components/navbar/NavBar.vue";
export default {
  components: { NavBar },
  name: "MyDiscover",
  data() {
    return {
      navBarData: [
        { name: "个性推荐", path: "/discover/recommend" },
        { name: "歌单", path: "/discover/musiclist" },
        { name: "排行榜", path: "/discover/ranking" },
        { name: "歌手", path: "/discover/singer" },
      ],
    };
  },
  methods: {
    clickBarItem(path) {
      // console.log(path);
      if (path != this.$route.path) {
        this.$router.push(path);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.discoverContainer {
  overflow: hidden;
  padding: 0 !important;
}
.discover {
  max-width: 3000px;
  height: 100%;
}
</style>